<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>会员管理</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="//unpkg.com/layui@2.9.21/dist/css/layui.css" rel="stylesheet">
</head>
<body>
<div class="layui-layout layui-layout-admin">
  <script>
    var value = sessionStorage.getItem("admin");
    if (value ===null){
      alert("请先登录!")
      window.location.href = "../login/login.html"
    }
  </script>
  <div class="layui-header" style="background-color: #c0c4cc">
    <div class="layui-logo layui-hide-xs layui-bg-black">酒店预定管理系统</div>
    <ul class="layui-nav layui-layout-right">
      <li class="layui-nav-item layui-hide layui-show-sm-inline-block">
        <a href="javascript:;">
          <img src="//unpkg.com/outeres@0.0.10/img/layui/icon-v2.png" class="layui-nav-img">
          <span id="head_user"></span>
          <script>
            var value = sessionStorage.getItem("name");
            document.getElementById("head_user").textContent=value
          </script>
        </a>
      </li>
    </ul>
  </div>
  <div class="layui-side layui-bg-black">
    <div class="layui-side-scroll" style="background-color:sandybrown;">
      <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
      <ul class="layui-nav layui-nav-tree" lay-filter="test" style="background-color:sandybrown">
        <li class="layui-nav-item layui-nav-itemed">
          <a class="" href="javascript:;">个人信息管理</a>
          <dl class="layui-nav-child">
            <dd><a href="person_information.html">个人信息</a></dd>
          </dl>
        </li>
        <li class="layui-nav-item">
          <a href="javascript:;">酒店订单管理</a>
          <dl class="layui-nav-child">
            <dd><a href="OrderList.html">预定房间订单</a></dd>
            <dd><a href="checkinList.html">已入住房间订单</a></dd>
          </dl>
        </li>
        <li class="layui-nav-item">
          <a href="javascript:;">客房信息管理</a>
          <dl class="layui-nav-child">
            <dd><a href="guestroom_list.html">客房列表</a></dd>
            <dd><a href="roomType.html">房间类型</a></dd>
          </dl>
        </li>
        <li class="layui-nav-item">
          <a href="javascript:;">酒店活动管理</a>
          <dl class="layui-nav-child">
            <dd><a href="activity.html">活动管理</a></dd>
          </dl>
        </li>
        <li class="layui-nav-item">
          <a href="javascript:;">会员管理</a>
          <dl class="layui-nav-child">
            <dd><a href="member_management.html">会员列表</a></dd>
          </dl>
        </li>
      </ul>
    </div>
  </div>
  <div class="layui-body">
    <div style="padding: 15px;">
      <blockquote class="layui-elem-quote layui-text">
                <span class="layui-breadcrumb">
                  <a href="index.html">首页</a>
                  <a><cite>会员管理</cite></a>
                  <a><cite>会员列表</cite></a>
                </span>
      </blockquote>
      <table class="layui-table" id="memberTable" lay-filter="memberTableFilter">
        <!-- 搜索条件 -->
        <fieldset class="layui-elem-field">
          <legend>筛选条件</legend>
          <div class="layui-field-box">
            <div class="layui-form-item layui-form-pane">
              <label class="layui-form-label">昵称</label>
              <div class="layui-input-inline">
                <input type="text" id="search_username" placeholder="请输入昵称" class="layui-input">
              </div>

              <label class="layui-form-label">真实姓名</label>
              <div class="layui-input-inline">
                <input type="text" id="search_realname" placeholder="请输入真实姓名" class="layui-input">
              </div>
            </div>

            <div class="layui-form-item layui-form-pane">
              <div class="layui-inline">
                <button class="layui-btn layui-btn-radius layui-btn-warm" id="iReset">重置</button>
                <button class="layui-btn layui-btn-radius layui-btn-normal" id="searchVal">搜索</button>
              </div>
            </div>
          </div>
        </fieldset>
      </table>
    </div>
  </div>
  <div class="layui-footer">
      酒店会员信息
  </div>
</div>

<script src="//unpkg.com/layui@2.9.21/dist/layui.js"></script>
<script type="text/html" id="ID-table-demo-templet-switch">
  <!-- 使用 templet 函数根据 status 字段的值来决定是否选中开关 -->
  <input type="checkbox" name="status" value="{{= d.id }}" title="启用|未启用" lay-skin="switch" lay-filter="demo-templet-status" {{ d.status == 1? "checked" : "" }}>
</script>
<script type="text/html" id="ID-table-demo-templet-edit-delete">
  <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="delete">删除</a>
</script>
<script src="../jquery/jquery-3.6.0.js"></script>
<script>
  layui.use(['element', 'layer', 'util', 'table', 'form'], function(){
    var element = layui.element;
    var layer = layui.layer;
    var util = layui.util;
    var table = layui.table;
    var form = layui.form;
    var $ = layui.$;
    // 定义 tableFlash 函数

    function tableFlash(whereJSON) {
      // 从后端获取会员数据
      console.log(whereJSON)
      $.get('/user/selectAll', (data) => {
        // 渲染表格
        table.render({
          elem: '#memberTable',
          data: data.data,
          where:whereJSON,
          cols: [[
            {field: 'userId', title: 'ID', width: 80},
            {field: 'username', title: '昵称', width: 120},
            {field: 'realname', title: '真实姓名', width: 120},
            {field: 'gender', title: '性别', width: 120},
            {field: 'phone', title: '电话', width: 150},
            {title: '操作', width: 150, templet: '#ID-table-demo-templet-edit-delete'}
          ]],
          page: true
        });
      }).fail((err) => {
        layer.msg('获取会员数据失败', {icon: 2});
      });
    }

    // 初始渲染表格
    tableFlash();

    // 监听表格中的事件
    table.on('tool(memberTableFilter)', function(obj){
      var data = obj.data; // 获取当前行数据
      var layEvent = obj.event; // 获取 lay-event 对应的值（edit、delete）
      if(layEvent === 'edit'){
        // 弹出编辑窗口
        var editIndex = layer.open({
          type: 1,
          title: '编辑用户信息',
          area: ['400px', '300px'],
          content: '<form class="layui-form" style="padding: 20px;">' +
                  '<div class="layui-form-item">' +
                  '<label class="layui-form-label">id</label>' +
                  '<div class="layui-input-block">' +
                  '<input type: "text" name="userId" required lay-verify="required" placeholder="id" autocomplete="off" class="layui-input" value="'+ data.user_id +'" disabled>' +
                  '</div>' +
                  '<div class="layui-form-item">' +
                  '<label class="layui-form-label">用户名</label>' +
                  '<div class="layui-input-block">' +
                  '<input type="text" name="username" required lay-verify="required" placeholder="请输入用户名" autocomplete="off" class="layui-input" value="'+ data.username +'">' +
                  '</div>' +
                  '<div class="layui-form-item">' +
                  '<label class="layui-form-label">真实姓名</label>' +
                  '<div class="layui-input-block">' +
                  '<input type="text" name="realname" required lay-verify="required" placeholder="请输入真实姓名" autocomplete="off" class="layui-input" value="'+ data.realname +'">' +
                  '</div>' +
                  '<div class="layui-form-item">' +
                  '<label class="layui-form-label">性别</label>' +
                  '<div class="layui-input-block">' +
                  '<input type="text" name="gender" required lay-verify="required" placeholder="请输入性别" autocomplete="off" class="layui-input" value="'+ data.gender +'">' +
                  '</div>' +
                  '<div class="layui-form-item">' +
                  '<label class="layui-form-label">电话</label>' +
                  '<div class="layui-input-block">' +
                  '<input type="text" name="phone" required lay-verify="required" placeholder="请输入电话" autocomplete="off" class="layui-input" value="'+ data.phone +'">' +
                  '</div>' +
                  '</div>' +
                  '<div class="layui-form-item">' +
                  '<div class="layui-input-block">' +
                  '<button class="layui-btn" lay-submit lay-filter="submitEdit">提交</button>' +
                  '<button class="layui-btn layui-btn-primary" lay-close>取消</button>' +
                  '</div>' +
                  '</div>' +
                  '</form>',
          success: function(layero, index){
            form.render();
          }
        });
      } else if(layEvent === 'delete'){
        // 弹出确认删除对话框
        layer.confirm('确定要删除该用户吗？', function(index){
          // 向服务器发送删除请求
          $.ajax({
            url: '/user/deleteById', // 这里需要替换为实际的删除接口
            type: 'DELETE',
            data: {userId:data.user_id},
            success: function(response){
              if(response.code === 200){
                layer.msg('删除成功', {icon: 1});
                // 刷新表格
                tableFlash();
              } else {
                layer.msg('删除失败', {icon: 2});
              }
            },
            error: function(err){
              layer.msg('删除时发生错误', {icon: 2});
            }
          });
          layer.close(index);
        });
      }
    });
    // 监听编辑提交事件
    form.on('submit(submitEdit)', function(formData){
      // 构建 MemberManagementUpdateVo 对象
      var memberUpdateVo = {
        userId: formData.field.userId,
        username: formData.field.username,
        realname: formData.field.realname,
        gender: formData.field.gender,
        phone: formData.field.phone
      };
      // 发送修改后的数据到服务器，更新用户信息
      $.ajax({
        url: '/user/memberManagementUpdateById', // 替换为实际的更新接口
        type: 'post',
        contentType: 'application/json', // 设置请求的内容类型为 JSON
        data: JSON.stringify(memberUpdateVo), // 将对象转换为 JSON 字符串发送
        success: function(response){
          if(response.code === 200){
            layer.msg('更新成功', {icon: 1});
            // 关闭弹窗
            layer.close(editIndex);
            // 刷新表格
            tableFlash();
          } else {
            layer.msg('更新失败', {icon: 2});
          }
        },
        error: function(err){
          layer.msg('更新时发生错误', {icon: 2});
        }
      });
      return false;
    });


    // 状态 - 开关操作
    form.on('switch(demo-templet-status)', function(obj){
      var id = this.value;
      var name = this.name;
      layer.tips(id + ' ' + name + ': '+ obj.elem.checked, obj.othis);
    });

    // 头部事件
    util.event('lay-header-event', {
      menuLeft: function(othis){ // 左侧菜单事件
        layer.msg('展开左侧菜单的操作', {icon: 0});
      },
      menuRight: function(){  // 右侧菜单事件
        layer.open({
          type: 1,
          title: '更多',
          content: '<div style="padding: 15px;">处理右侧面板的操作</div>',
          area: ['260px', '100%'],
          offset: 'rt', // 右上角
          anim: 'slideLeft', // 从右侧抽屉滑出
          shadeClose: true,
          scrollbar: false
        });
      }
    });
    $("#iReset").click(function () {
      // 重置搜索数据
      $("#search_username").val("");
      $("#search_realname").val("");
      // 重置表数据
      tableFlash();
    });
    $("#searchVal").click(function () {
      let search_username = $("#search_username").val();
      let search_realname = $("#search_realname").val();
      let whereJSON = {};
      if(search_username != null && search_username != "") {
        whereJSON.username = search_username;                   //  whereJSON.username  这里的username是一个动态追加的属性名称  这是前端js独有的功能
      }
      if(search_realname != null && search_realname != "") {
        whereJSON.realname = search_realname;
      }
      tableFlash(whereJSON)
    });
  });

</script>
</body>
</html>